<template>
  <el-drawer
    title="文章编辑"
    :direction="direction"
    :before-close="handleClose"
    v-model="visibilityBinding"
    size="55%"
  >
    <el-form>
      <div class="form-drawer">
        <el-row>
          <el-col :span="24">
            <span class="demonstration">文章分类：</span>
            <el-select
              v-model="pagination.category_id"
              :placeholder="pagination.category_name"
            >
              <el-option
                v-for="item in sort"
                :key="item.id"
                :label="item.content"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">文章名称：</span>
            <el-input
              placeholder="请填写文章名称"
              v-model="pagination.title"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">文章作者：</span>
            <el-input
              placeholder="请填写文章名称"
              v-model="pagination.author"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="width: 100px" class="demonstration">文章描述：</span>
            <el-input
              placeholder="请填写文章描述"
              v-model="pagination.desc_content"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <span style="margin-right: 15px" class="demonstration"
              >关键词：</span
            >
            <el-input
              placeholder="请填写关键词"
              v-model="pagination.keywords"
              class="form-search-input"
            >
            </el-input>
          </el-col>
        </el-row>

        <!-- 富文本编辑器 -->
        <el-row style="margin-top: 20px">
          <div style="margin: 20px 0">文章内容：</div>
          <wangEditor :valueHtml="pagination.content" ref="Editor"></wangEditor>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-button type="warning" @click="handleEdit(pagination)">
            重置
          </el-button>
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="handleSubmit(pagination)"
          >
            提交
          </el-button>
        </el-row>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { aticleSort, detailArticle } from '@/api/article.js'
import wangEditor from '@/components/wangEditor/index.vue'
import { Store } from 'vuex'

const sort = ref([])
const infos = ref(null)
const Editor = ref(null)

const props = defineProps(['visibilityBinding', 'pagination', 'flag'])
const emits = defineEmits([
  'handleCloseEmits',
  'handleDrawerSubmitEmits',
  'addDrawerSubmitEmits'
])

onMounted(() => {
  aticleSort().then((res) => {
    sort.value = res
  })
})

const info = reactive({
  id: '',
  title: '',
  author: '',
  content: '',
  keywords: '',
  desc: '',
  category_id: ''
})

const handleEdit = (page) => {
  for (const key in page) {
    props.pagination[key] = ''
  }
  Editor.value.valueHtmls = ''
}

const handleClose = (visibilityBinding) => {
  visibilityBinding = false
  emits('handleCloseEmits', visibilityBinding)
}

const option = (page) => {
  
}

const handleSubmit = (page) => {
  info.id = page.id
  info.title = page.title
  info.author = page.author
  info.keywords = page.keywords
  info.desc = page.desc_content
  info.category_id = page.category_id
  info.content = Editor.value.valueHtmls
  console.log('Editor', Editor.value)
  // 判断值是否为空
  if (props.flag) {
    emits('handleDrawerSubmitEmits', info)
  } else {
    emits('addDrawerSubmitEmits', info)
  }
}
</script>

<style lang="scss" scoped>
#form {
  padding: 20px;
}
.head {
  margin: 20px 0;
}
.form-search {
  display: flex;
  align-content: center;
  justify-content: right;
}
.form-search-input {
  text-align: right;
  width: 200px;
}
.form-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}
.edit {
  padding: 20px 0;
}
.form-drawer {
  padding: 20px;
}
</style>
